<!--
 * @Description:
 * @Author: william
 * @Date: 2025-02-17 16:47:40
 * @LastEditors: william
 * @LastEditTime: 2025-05-23 17:24:18
-->
<template>
  <BaseDialog
    v-model="dialogVisible"
    :title="g_t('userCenter.appActivation')"
    width="560px"
    :before-close="handleClose"
  >
    <el-form
      ref="refDialogForm"
      v-loading="formLoading"
      :label-width="0"
      :model="formData"
      :rules="rules"
      @submit.prevent
    >
      <el-form-item prop="identifierList">
        <el-checkbox-group v-model="formData.identifierList">
          <el-checkbox
            v-for="item in appList"
            :key="item.id"
            :label="item.appName"
            :value="item.appIdentifier"
          />
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="form-dialog-footer">
        <el-button plain @click="handleClose">{{
          $t('public.cancel')
        }}</el-button>
        <el-button type="primary" @click="handleSubmitForm">{{
          $t('public.confirm')
        }}</el-button>
      </div>
    </template>
  </BaseDialog>
</template>

<script setup>
const props = defineProps({
  id: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update'])
const dialogVisible = defineModel({
  type: Boolean,
  default: false
})

const refDialogForm = ref(null)
const formLoading = ref(false)
const formData = ref({
  identifierList: []
})
const rules = {
  identifierList: g_rules.selectRule(g_t('userCenter.application'))
}
const appList = ref([])

onMounted(() => {
  getAppList()
  getTenantApp()
})

const getAppList = () => {
  formLoading.value = true
  g_api.userCenter
    .apiAppList()
    .then(({ code, data }) => {
      if (code === '200' && data) {
        appList.value = data
      }
    })
    .finally(_ => {
      formLoading.value = false
    })
}

const getTenantApp = () => {
  formLoading.value = true
  g_api.userCenter
    .apiGetTenantApp({
      tenantId: props.id
    })
    .then(({ code, data }) => {
      if (code === '200' && data) {
        formData.value.identifierList = data
      }
    })
    .finally(_ => {
      formLoading.value = false
    })
}

const handleClose = () => {
  dialogVisible.value = false
}

const handleSubmitForm = () => {
  if (formLoading.value) return
  refDialogForm.value.validate(valid => {
    // console.log('handleSubmitForm', formData.value)
    if (!valid) return
    formLoading.value = true
    g_api.userCenter
      .apiCreateTenantApp({
        tenantId: props.id,
        appIdList: appList.value
          .filter(item =>
            formData.value.identifierList.includes(item.appIdentifier)
          )
          .map(item => item.id)
      })
      .then(res => {
        if (res.code === '200') {
          ElMessage({
            message: res.message,
            type: 'success'
          })
          handleClose()
          emit('update')
        }
      })
      .finally(() => {
        formLoading.value = false
      })
  })
}
</script>

<style scoped lang="scss"></style>
